<template>
<div>
<div class="table">
		<row>
		    <div class="divmenu">
			    <Col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
				     <Button type="primary" size="large" @click="Add">
					     <p class="title">
						     <Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;<span>新增</span>
					     </p>
				     </Button>
			     </Col>
		    </div>
	    </row>
		<div class="divSearch"><!--搜索框-->
			<Row>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">分组名称:</label>
					<Select v-model="SearchModel.GroupName" placeholder="请选择" class="searchInput"  @on-change="initTableData">
                        <Option value="">全部</Option>
                        <Option :value='item.GroupName' v-for="item in GroupList" :key="item.GroupCode">{{item.GroupName}}</Option>
                    </Select>			
				</Col>    
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">字典名称:</label>
					<Input type="text" v-model="SearchModel.DictText"  placeholder="请输入" class="searchInput"></Input>			
				</Col>     
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">字典状态:</label>
					<Select v-model="SearchModel.Status" placeholder="请选择" class="searchInput" @on-change="initTableData()">
						<Option value="">全部</Option>					
						<Option value="1">启用</Option>
						<Option value="0">禁用</Option>
					</Select>								
				</Col>
				 <Col :lg="{span:2}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}">
					<Button icon="ios-search" type="primary" @click="Search()" style="margin-top:5px;">查询</Button>
				</Col>   
			</Row>
		</div>		
	    <row><!--数据表格-->
		    <Col>
			    <Table :context="self" ref="table" :stripe=true border   :columns="columns1" :data="tabledatas" size="large" @on-select-all="selectAll()" @on-select="selectSingel()" :height="clientHeight">
				</Table>
		    </Col>
		</row>
		 <row><!--分页插件-->       
                    <Col>
                        <!-- <spin size="large"></spin> -->
                        <Page class="pageComponent" :total="tableTotal" show-elevator show-sizer show-total placement="top"
						:page-size-opts='pageSizeOpts' :page-size="20"
						   @on-change="changePage" @on-page-size-change="changePageSize">
                        </Page>
                    </Col>
            </row>
    </div>
    <!--数据字典编辑弹窗-->
     <Modal v-model="ShowModal"  :mask-closable="false" >
	    <p style="display:none"  slot="close" @click="cancel('DictModel')"> <Icon type="close-circled" color="red" size="25"></Icon></p>
	    <p slot="header"  class="title">       
            <span style="font-size: 20px">数据字典编辑</span>
        </p>
		<Form ref="DictModel" :model="DictModel" :rules="DictRule" :label-width="80">
			<Form-item label="分组名称" prop="GroupName">
				<Input v-model="DictModel.GroupName" placeholder="请输入分组名称"></Input>
			</Form-item>
			<Form-item label="分组代码" prop="GroupCode">
				<Input v-model="DictModel.GroupCode" placeholder="请输入分组代码"></Input>
			</Form-item>
			<Form-item label="字典名称" prop="DictText">
				<Input v-model="DictModel.DictText" placeholder="请输入字典名称"></Input>
			</Form-item>
			<Form-item label="字典值" prop="DictValue">
				<Input v-model="DictModel.DictValue" placeholder="请输入字典值"></Input>
			</Form-item>
			<Form-item label="字典拼音" prop="PinYin">
				<Input v-model="DictModel.PinYin" placeholder="请输入字典拼音"></Input>
			</Form-item>

			<Form-item label="排序号" prop="Sort">
				<Input v-model="DictModel.Sort" placeholder="请输入排序号"></Input>
			</Form-item>
			<Form-item label="状态" prop="Status">
				<Select v-model="DictModel.Status" placeholder="请选择字典状态">
					<Option value="1">启用</Option>
					<Option value="0">禁用</Option>
				</Select>
			</Form-item>
			<Form-item label="描述" prop="Remark">
				<Input v-model="DictModel.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
			</Form-item>
		</Form>
	    <div slot="footer">	
                <Button  @click="cancel('DictModel')">取消</Button>&nbsp;&nbsp;
                <Button  type="primary"  @click="handleSubmit('DictModel')">提交</Button>
        </div>
    </Modal>
</div>
</template>
<script>
export default {
	data(){
		//数据验证对象
		const validateNum = (rule, value, callback) => {  
            if (value.length!=0)
            {
                 if (isNaN(value)) {
                    callback(new Error('请输入数字'));
                } 
                else { 
                    if(value<0)
                    {
                       callback(new Error('最小值为0'));
                    }
                    else{
                        if(value>0)
                        {
                            var propertyName=rule.field;
                            this.Heighlight[propertyName]=true;//动态修改高亮

                        }
                        else{
                            var propertyName=rule.field;
                            this.Heighlight[propertyName]=false;//动态修改高亮
                        }
                        callback(); 
                    }
                }
            }
            else{
                 callback(new Error('值不能为空'));
            }
           
        };
		return {
			self:this,
			tableTotal:0,//表格记录条数
	        ShowModal:false,//model开关,针对form填报表格
	        tabledatas:[],//表格数据
			clientHeight:window.innerHeight-340,
			pageSizeOpts:[20,30,40,50],
			GroupList:[],
	        columns1:[
	            {title:'分组名称',key:'GroupName'},
	            {title:'分组代码',key:'GroupCode'},
	            {title:'字典名称',key:'DictText'},				
				//{title:'字典拼音',key:'PinYin'},
	            {title:'字典数值',key:'DictValue',ellipsis:true},				
	            {title:'排序',key:'Sort'},
	            {title:'是否启用',key:'Status',render:(h, params)=>{
					if(params.row.Status=='1')
						return h('span',`启用`);
					else 
						return h('span',`禁用`);
					}
				},								
	           // {title:'备注',key:'Remark'},	
				{title: '操作',key: 'action',width: 200,align: 'center',
					render:(h,params)=>{
						return h('div', [
											h('Button', { class:{ieditColor:true},props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.index,params.row.Id) }}}, '编辑'),
											h('Button', { class:{ideleteColor:true},props: {type:'ghost',size:'small',icon:'ios-trash-outline'},on: {click: () => {this.Remove(params.index,params.row.Id); }}}, '删除')])
	                }
				}													
            ],
			SearchModel:{
				PageNumber:1,//页码
				PageSize:20,//页面数量
				GroupName:'',GroupCode:'',DictText:'',PinYin:'',DictValue:'',Sort:'',Status:'',Remark:''
			},
	        DictModel: {//表单实体
				Id:0,GroupName:'',
				GroupCode:'',
				DictText:'',
				PinYin:'',
				DictValue:'',Sort:'',Status:'',Remark:''

	        },
	        //表单验证规则
	        DictRule: {//表单验证规则
				GroupName:[ { required: true, message: '请填写分组名称', trigger: 'blur' }],
	        	GroupCode:[ { required: true, message: '请填写分组代码', trigger: 'blur' }],
	        	DictText:[ { required: true, message: '请填写字典名称', trigger: 'blur' }],
				DictValue:[ { required: true, message: '请填写字典值', trigger: 'blur' }],
	        	PinYin:[ { required: true, message: '请填写字典拼音', trigger: 'blur' }],				
		        Sort:[ { required: true, message: '请填写排序编号', trigger: 'blur' }],
		        Status:[ { required: true, message: '请选择状态', trigger: 'change' }],
		        Remark:[ { required: true, message: '请填写描述', trigger: 'blur' }],
	        }
		}
	},
	mounted:function(){
        const that = this;
        window.onresize = () => {//动态设置数据表的高度
            return (() => {
                that.clientHeight = window.innerHeight-340;
            })()
        };
    },
	methods:{
		GetGroupList(){
			var self=this;
			self.$http.get('Dict/GetGroupList').then(
				function(res){
					if(res.data.status===1)
					{ 
						self.GroupList= res.data.model;
					}
					else{
						self.$Modal.warning( {title:"提示信息",content:"数据字典分组信息加载失败!"});
					}
			});
		},
		Add:function(){//添加数据
			this.showModel();
		},
        showModel:function(){
            this.ShowModal=true;//显示对话框      
        },
        handleSubmit (name) {//数据提交
			var self=this;
			this.$refs[name].validate((valid) => {
				if (valid) {
					if(self.DictModel.Id==''){//添加提交
						this.$http.post('Dict',self.DictModel).then(
							function(res){
								if(res.data.status===1)
								{ 
									self.initTableData();
									self.$Modal.success( {title:"提示信息",content:"数据字典添加成功"});
									self.ShowModal = false;	
									self.restModel(name);//重置model
								}
								else{
									self.$Modal.warning( {title:"提示信息",content:"数据字典添加失败,请与管理员联系!"});
								}
							})
					}	
					else{//提交编辑
						self.$http.put('Dict',self.DictModel).then(
							function(res){
								if(res.data.status===1)
								{
									self.initTableData();
									self.$Modal.success( {title:"提示信息",content:"数据编辑成功"});
									self.ShowModal = false;
									self.restModel(name);//重置model
								}
								else{
									self.$Modal.warning( {title:"提示信息",content:"数据编辑失败,请与管理员联系!"});
								}
								self.DictModel.Id=0;
							})	
					}			
				} 
			});
	},
	//查询方法
	Search() {
		this.initTableData();
    },
	cancel:function(name){//关闭新增对话框
		this.$refs[name].resetFields();//关闭表单校验
		this.ShowModal=false;//关闭对话框
	},
	//批量删除
	Removes:function(id,index){//批量删除
		this.$Modal.confirm({
			title: '提示信息',
			content: '<p>数据删除后不可恢复，确定要删除？</p>',
			onOk: () => {
				this.tabledata=[];
				this.$Message.info('数据删除成功');
				this.tableTotal=this.tabledata.length;
			}
		});
	},
	Remove :function(index,ID) {//删除单条数据
		var  self=this;
		self.$Modal.confirm({
			title: '提示信息',
			content: '<p>数据删除后不可恢复，确定要删除？</p>',
			onOk: () => {
				this.$http.delete("Dict",{ params: { id: ID } }).then(
					function(res){
						if(res.data.status===1)
						{
							self.$Modal.success({title:"提示信息",content:"数据删除成功!!!"});
							self.initTableData();
						}
						else{
							self.$Modal.error({title:"提示信息",content:"数据删除失败!!!"});
						}
					}
				)
			}
		});             
	},
	Edit:function(index,ID){//编辑数据
		var self=this;
		this.$http.get("Dict",{ params: { id: ID } }).then(//获取数据编辑项的值
			function(res){
				if(res.data.status==1)
				{
					self.DictModel=res.data.model;
					res.data.model.Id=ID;
				}
				else{
					self.$Modal.error({title:"提示信息",content:"编辑数据加载失败!!!"});
				}
			}
		);             
		this.showModel();
	},
	//全选
	selectAll:function(){
		alert("全选");
	},
	//单选
	selectSingel:function(){
		alert("单选");
	},
	exportData:function(){
		this.$refs.table.exportCsv({
				filename: '原始数据'
			});
	},
	//重置model
	restModel(modelname) {
		this.$refs[modelname].resetFields();//重置model
	},
	initTableData:function(){//初始化数据
		var self=this;
		this.$http.post("Dict/PostPageList",self.SearchModel).then(function(res){
				self.tabledatas=[];
				if(res.data.status==1)
				{	
					self.tabledatas=res.data.rows;//数据初始化
					self.tableTotal=res.data.total;
				}
				else if(res.data.status==-1){
					self.$Modal.warning({title:'提示信息',content:res.data.message});
				}
				else if(res.data.status==-2){
					self.$Modal.error({title:'提示信息',content:"应用出现错误,请与管理员联系!"});
				}
				else{
					self.$Modal.error({title:'提示信息',content:"应用程序出现未知错误!"});
				}
			});
	},
	changePage:function(PageNumber){//改变页码事件
		this.SearchModel.PageNumber=PageNumber;
		this.initTableData();
	},
	changePageSize:function(PageSize){//改变页面记录条数事件
		this.SearchModel.PageSize=PageSize;
		this.initTableData();
	}
},
	created:function(){ //初始化函数
		this.initTableData();
		this.GetGroupList();
	}
}
</script>